<template>
  <el-drawer
      ref="drawerRef"
      v-model="dialog"
      custom-class="demo-drawer"
      direction="rtl"
      size="20%"
      title="修改员工信息"

  >
    <div class="demo-drawer__content">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="姓名:" prop="name">
          <el-input v-model="form.name" autocomplete="off" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="职位:" prop="position">
          <el-select v-model="form.position" style="width: 200px">
            <el-option
                v-for="item in optionPositions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="入职日期:" prop="date">
          <el-date-picker
              v-model="form.date"
              class="dateselect"
              format="YYYY/MM/DD"
              placeholder="请选择日期"
              style="width: 200px"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="部门" prop="department">
          <el-select v-model="form.department" style="width: 200px">
            <el-option
                v-for="item in optionDepartments"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            :label-width="formLabelWidth"
            label="手机号:"
            prop="phone"
            status-icon
        >
          <el-input v-model="form.phone" autocomplete="off" style="width: 200px"/>
        </el-form-item>
        <el-form-item
            :label-width="formLabelWidth"
            label="邮箱:"
            prop="email"
            status-icon
        >
          <el-input v-model="form.email" autocomplete="off" style="width: 200px"/>
        </el-form-item>
        <el-form-item>
          <el-button size="large" style="width: 100%;margin-top: 20px" type="primary" @click="submit(formRef)">提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance} from 'element-plus'
import {ElDrawer} from 'element-plus'
import {useDepartmentStore} from "@/stores/Person/Department"
import {usePositionStore} from '@/stores/Person/Position'
import {usePersonSelectForm} from '@/stores/PersonSelect/PersonSelectForm'
import {changePersonApi} from "@/api/PersonSelect";

const PersonSelectForm = usePersonSelectForm()
const PositionStore = usePositionStore()
const DepartmentStore = useDepartmentStore()

const formLabelWidth = '80px'
let timer

const table = ref(false)
const dialog = ref(false)
const loading = ref(false)

const form = PersonSelectForm

const formRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof ElDrawer>>()

let optionPositions = PositionStore.positions
let optionDepartments = DepartmentStore.departments


const emits = defineEmits(["ConfigClick"]);
const FlushClick = () => {
  emits("ConfigClick");
}

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      changePersonApi(form.id, form.name, form.position, form.date, form.department, form.phone, form.email).then(res => {
        if (res['code'] == 200) {
          CloseDrawer()
          console.log('提交成功')
          FlushClick()
        } else {
          alert('提交失败:' + res['data'])
        }

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}


//表单验证
const checkPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('手机号不可为空'))
  } else if (value.length != 11 || value[0] != 1) {
    return callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}

const rules = reactive({
  phone: [{required: true, validator: checkPhone, trigger: 'blur'}],
  email: [{
    required: true,
    message: '请输入邮箱地址',
    trigger: 'blur',
  },
    {
      type: 'email',
      message: '请输入正确的邮箱',
      trigger: ['blur', 'change'],
    }]
})


const onClick = () => {
  drawerRef.value!.close()
}
const OpenDrawer = (index: number, row) => {
  dialog.value = true
}
const CloseDrawer = () => {
  onClick()
}
defineExpose({
  OpenDrawer,
  CloseDrawer
});


</script>

<style scoped>

</style>
